import React from 'react'

import './index.css'
/* 
  props
*/

// 父组件
export default class extends React.Component {
  state = {
    parentMsg: '',
    msg: '我是你父亲'
  }

  // 提供回调函数，用来接收数据
  getChildMsg = (e) => {
    console.log(e)
    this.setState({
      parentMsg: e
    })
    setTimeout(() => {
      this.setState({
        msg: '别刷抖音了'
      })
    }, 1000)
  }
  render() {
    return (
      <div className="parent">
        父组件：{this.state.parentMsg}
        {/* 父传子，使用的是props，可以写在组件双括号内部，类似vue插槽
        也可以写在组件上，使用属性值传递，传递事件，就需要在组件上写入具体
        的事件，然后在内部指定事件触发的函数 */}
        <Child setMsg={this.getChildMsg}>{this.state}</Child>
      </div>
    )
  }
}

// 子组件
class Child extends React.Component {
  state = {
    msg: '刷抖音'
  }
  sendMsg = () => {
    // 这事件触发的时props中传递过来的父组件的事件，自己可以传参
    this.props.setMsg(this.state.msg)
  }

  render() {
    console.log(this.props.children)
    console.log(this.props)
    return (
      <div className="child">
        {/* 子组件接受，使用类似插槽的，需要使用 this.props.children来接收
        使用属性名传递的，可以直接接收*/}
        <div>父组件传递个子组件的值：{this.props.children.msg}</div>
        {/* 子组件给父组件传值，使用的是事件，类似vue的$emit
        首先是子组件触发一个事件 */}
        子组件： <button onClick={this.sendMsg}>点我，给父组件传递数据</button>
      </div>
    )
  }
}
